<template>
  <el-container>
    <el-main v-loading="loading">
      <el-table :data="hospitalList">
        <el-table-column prop="id" label="医生ID" width='120'/>
        <el-table-column prop="name" label="医生名字"/>
        <el-table-column prop="hospitalName" label="所在医院"/>
        <el-table-column prop="dept" label="所在科室"/>
        <el-table-column prop="address" label="地区" />
        <el-table-column prop="level" label="医生职称" width="120"/>
        <el-table-column prop="phone" label="医生手机号"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delMsg(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>确认删除该条信息？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
// import { hospitalInfo } from "data/hosNetwork";
export default {
  name: "doctorTable",
  props:['data', 'loading'],
  data() {
    return {
      hospitalList: [],
      // hospitalList: Array(8).fill(hospitalInfo),
      dialogVisible: false,
      id:''
    };
  },
  methods: {
    handleClick(params) {
      this.id = params.id;
      this.$router.push(`addDoc?type=edit&id=${this.id}`);
    },
    delMsg(params) {
      this.id = params.id;
      this.dialogVisible = true;
    },
    sure(){
      this.api.delete(`/doctor/${this.id}`).then(()=>{
        this.hospitalList = this.hospitalList.filter(item=>{
          return item.id !== this.id
        })
      }).catch((err) => {
        console.log(err)
        this.$message(err.data.message)
      })
      this.dialogVisible = false
    }   
  },
  watch:{
    data(newValue){
      this.hospitalList = newValue;
    }
  }
};
</script>
<style lang="less" scoped>
</style>